<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    div{
        position:absolute;
        left:0;
        width:100px;
        height:100px;
        background-color:pink;
    }
</style>
<body>
    <div></div>
    <script>
        //动画原理
        //1、获得盒子的当前的位置
        //2、让盒子在当前位置加上1个移动距离
        //3、利用定时器不断重复这个操作
        //4、停下来的话加一个停止计时器的条件
        //5、注意：此元素需要添加定位，才能使用element.style.left
        //element.style来赋值，offsetLeft是来获取值
        //注意要想实现动画效果，动画元素的css中必须加定位才可以

        //1、先获取元素
        var div = document.querySelector('div')
        //2、设置定时器来实现元素的移动
        var timer= setInterval(function(){
            //加个判断条件，让它停下来
            if(div.offsetLeft >= 500){
                clearInterval(timer)
            }else{
                div.style.left = div.offsetLeft + 5 +'px';
            }
        },30)
       
    </script>
</body>
</html>